<template>
	<div class="ui-phone">
		<div class="ui-phone-header">
			{{ title }}
		</div>
		<div class="ui-phone-body" :style="{'background-color': backgroundColor}">
			<slot></slot>
		</div>
	</div>
</template>

<script>
export default {
	name: 'ui-phone-model',
	props: {
		title: {
			type: String,
			default: ''
		},
		backgroundColor: {
			type: String,
			default: '#ffffff'
		}
	}
}
</script>

<style lang="less">
.ui-phone {
	padding: 52px 18px 44px;
	width: 334px;
	height: 668px;
	background: url('../../images/ui/ui_phone_model.png') no-repeat center;
	&-header {
		height: 34px;
		line-height: 34px;
		font-size: 14px;
		color: #000;
		text-align: center;
	}
	&-body {
		position: relative;
		height: 538px;
	}
}
</style>